<template>
  <div class="client_container">
    <div class="card left_container">
      <el-input
        v-model="category.filterNodeText"
        placeholder="输入关键字进行过滤"
      />

      <el-tree
        ref="clientCategoryNode"
        class="filter-tree"
        :data="category.data"
        :props="{children: 'children', label: 'name'}"
        :filter-node-method="handleClientCategoryFilterNode"
        highlight-current
        default-expand-all
        @node-click="handleClientCategoryNodeClick"
      />
    </div>
    <div class="right_container">
      <TablePageContainer>
        <template #header>
          <el-form :model="table.params" :inline="true">
            <el-form-item label="应用名称">
              <el-input v-model="table.params.name" placeholder="请输入应用名称" />
            </el-form-item>
            <el-form-item label="是否集成统一认证">
              <el-select v-model="table.params.isSso" placeholder="请选择是否集成统一认证" clearable filterable>
                <el-option :value="1" label="是" />
                <el-option :value="2" label="否" />
              </el-select>
            </el-form-item>
            <el-form-item label="是否同步数据">
              <el-select v-model="table.params.isSso" placeholder="请选择是否同步数据" clearable filterable>
                <el-option :value="1" label="是" />
                <el-option :value="2" label="否" />
              </el-select>
            </el-form-item>
            <el-form-item label="应用状态">
              <el-select v-model="table.params.status" placeholder="请选择应用状态" clearable filterable>
                <el-option :value="1" label="启用" />
                <el-option :value="2" label="禁用" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getList">查询</el-button>
              <el-button @click="handleReset">重置</el-button>
            </el-form-item>
          </el-form>
        </template>
        <template #operation>
          <el-button type="primary" @click="handleCloneSaveOrEditDialog(true)">新增</el-button>
          <el-button type="danger" :disabled="table.selectionRows.length <= 0" @click="handleDel">批量删除</el-button>
        </template>
        <template #table>
          <el-table v-loading="table.loading" :data="table.data" border stripe @selection-change="handleTableSelectionChange">
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column label="Logo" width="100" align="center">
              <template slot-scope="scope">
                <el-avatar class="table_pic" :size="34" shape="square" :src="scope.row.logo">
                  <i class="fa-brands fa-uncharted" />
                </el-avatar>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="应用名称" align="center" />
            <el-table-column label="统一认证" width="100" align="center">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.isSso" :active-value="1" :inactive-value="2" :disabled="isLcSsoServer(scope.row.isLcSsoServer)" @change="handleSwitchChange('isSso', scope.row)" />
              </template>
            </el-table-column>
            <el-table-column label="同步数据" width="100" align="center">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.isSync" :active-value="1" :inactive-value="2" :disabled="isLcSsoServer(scope.row.isLcSsoServer)" @change="handleSwitchChange('isSync', scope.row)" />
              </template>
            </el-table-column>
            <el-table-column label="状态" width="100" align="center">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" :disabled="isLcSsoServer(scope.row.isLcSsoServer)" @change="handleSwitchChange('status', scope.row)" />
              </template>
            </el-table-column>
            <el-table-column prop="sorted" label="排序" width="100" align="center" sortable />
            <el-table-column prop="createdTime" label="创建时间" width="160" align="center" sortable />
            <el-table-column prop="updatedTime" label="修改时间" width="160" align="center" sortable />
            <el-table-column label="操作" width="200" align="center">
              <template slot-scope="scope">
                <el-button v-if="!isLcSsoServer(scope.row.isLcSsoServer)" type="text" icon="fa fa-pen-to-square" @click="handleEdit(scope.row)">修改</el-button>
                <el-button v-if="!isLcSsoServer(scope.row.isLcSsoServer)" type="text" icon="fa fa-trash-can" @click="handleDel(scope.row)">删除</el-button>
                <el-dropdown v-if="scope.row.isSso === 1 || scope.row.isSync === 1" class="more-options">
                  <span class="el-dropdown-link">
                    更多<i class="fa-solid fa-chevron-down" />
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                      <el-button v-if="scope.row.isSso === 1" type="text" icon="fa-solid fa-stamp" @click="handleClientAllow(scope.row)">应用授权</el-button>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <el-button v-if="scope.row.isSync === 1" type="text" icon="fa-solid fa-rotate" @click="handleDataSync(scope.row)">同步数据</el-button>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <template #page>
          <Pagination :total.sync="table.total" :page.sync="table.params.pageNum" :limit.sync="table.params.pageSize" @pagination="getList" />
        </template>
      </TablePageContainer>

      <SaveOrEdit v-if="saveOrEditDialog.visible" :id="saveOrEditDialog.id" :visible.sync="saveOrEditDialog.visible" :type="saveOrEditDialog.type" @getList="getList" @handleClose="handleCloneSaveOrEditDialog" />
      <ClientAllow v-if="clientAllowDialog.visible" :row="clientAllowDialog.row" :visible.sync="clientAllowDialog.visible" @handleClose="handleClientAllowDialog" />
      <DataSync v-if="dataSyncDialog.visible" :id="dataSyncDialog.id" :visible.sync="dataSyncDialog.visible" @handleClose="handleDataSyncDialog" />
    </div>
  </div>
</template>
<script>
import _ from 'lodash'
import { del, editStatus, getPage } from '@/api/client/'
import { getAll } from '@/api/client/clientCategory'
import { nullToStr } from '@/utils'

export default {
  name: 'ClientIndex',
  components: {
    TablePageContainer: () => import('@/components/TablePageContainer'),
    Pagination: () => import('@/components/Pagination'),
    SaveOrEdit: () => import('@/views/client/list/components/SaveOrEdit.vue'),
    ClientAllow: () => import('@/views/client/list/components/ClientAllow.vue'),
    DataSync: () => import('@/views/client/list/components/DataSync.vue')
  },
  data() {
    return {
      category: {
        filterNodeText: '',
        data: []
      },
      table: {
        params: {
          categoryId: undefined,
          name: '',
          isSso: undefined,
          status: undefined,
          pageNum: 1,
          pageSize: 10
        },
        defaultParams: undefined,
        loading: false,
        data: [],
        total: 0,
        selectionRows: []
      },
      saveOrEditDialog: {
        visible: false,
        type: undefined,
        id: undefined
      },
      clientAllowDialog: {
        visible: false,
        row: undefined
      },
      dataSyncDialog: {
        visible: false,
        id: undefined
      }
    }
  },
  watch: {
    'category.filterNodeText'(val) {
      this.$refs.clientCategoryNode.filter(val)
    }
  },
  created() {
    this.getClientCategoryList()
    this.table.defaultParams = _.cloneDeep(this.table.params)
    this.getList()
  },
  methods: {
    nullToStr,
    getList() {
      this.table.loading = true
      getPage(this.table.params).then(res => {
        this.table.data = res.data.records
        // eslint-disable-next-line no-return-assign
        this.table.data.forEach(item => this.$set(item, 'isShowSecretKey', false))
        this.table.total = res.data.total
        this.table.loading = false
      })
    },
    getClientCategoryList() {
      getAll().then((res) => {
        this.category.data = res.data
      })
    },
    handleClientCategoryFilterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    handleClientCategoryNodeClick(val) {
      this.table.params.categoryId = val.id
      this.getList()
    },
    handleSwitchChange(type, row) {
      const data = { id: row.id, [type]: row[type] }
      editStatus(data).then(res => {
        this.$message.success('修改成功')
      })
    },
    handleEdit(row) {
      this.handleCloneSaveOrEditDialog(true)
      this.saveOrEditDialog.type = 'edit'
      this.saveOrEditDialog.id = row.id
    },
    handleDel(row) {
      this.$confirm('此操作将永久删除该应用, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const ids = []
        if (this.table.selectionRows.length > 0) {
          this.table.selectionRows.forEach(item => {
            if (item.isLcSsoServer === 1) {
              this.$message.warning('存在统一认证服务应用, 不允许删除')
              return
            }
            ids.push(item.id)
          })
        }

        if (row.id) {
          ids.push(row.id)
        }

        if (ids.length <= 0) {
          return
        }

        del(ids).then(() => {
          this.$message.success('删除成功')
          this.getList()
        })
      })
    },
    handleTableSelectionChange(val) {
      this.table.selectionRows = val
    },
    handleCloneSaveOrEditDialog(v) {
      this.saveOrEditDialog.type = undefined
      this.saveOrEditDialog.id = undefined
      this.saveOrEditDialog.visible = v
    },
    handleClientAllow(row) {
      this.handleClientAllowDialog(true)
      this.clientAllowDialog.row = row
    },
    handleClientAllowDialog(v) {
      this.clientAllowDialog.row = undefined
      this.clientAllowDialog.visible = v
    },
    handleDataSync(row) {
      this.handleDataSyncDialog(true)
      this.dataSyncDialog.id = row.id
    },
    handleDataSyncDialog(v) {
      this.dataSyncDialog.id = undefined
      this.dataSyncDialog.visible = v
    },
    handleReset() {
      this.table.params = _.cloneDeep(this.table.defaultParams)
      this.getList()
    },
    isLcSsoServer(isSsoServer) {
      return isSsoServer === 1
    }
  }
}
</script>

<style scoped lang="scss">
.client_container {
  display: flex;

  .left_container {
    min-width: 240px;
    width: 15%;
  }

  .right_container {
    width: calc(85% - 10px);
    margin-left: 10px;
  }
}
</style>
